<template>
  <nav
    class="nav-links"
    v-if="userNav.length || repoLink"
  >
    <!-- user links -->
    <div
      class="nav-item"
      v-for="item in links"
      :key="item.link"
    >
      <DropdownLink
        v-if="item.type === 'links'"
        :item="item"
      />
      <NavLink
        v-else
        :item="item"
      />
    </div>

    <!-- repo link -->
    <!-- <a
      v-if="repoLink"
      :href="repoLink"
      class="repo-link"
      target="_blank"
      rel="noopener noreferrer"
    >
      {{ repoLabel }}
      <OutboundLink/>
    </a> -->
  </nav>
</template>

<script>
import DropdownLink from '@theme/components/DropdownLink.vue'
import { resolveNavLinkItem } from '../util'
import NavLink from '@theme/components/NavLink.vue'

export default {
  components: { NavLink, DropdownLink },

  data: () => ({
    links: []
  }),

  computed: {
    userNav () {
      return this.$themeLocaleConfig.nav || this.$site.themeConfig.nav || []
    },

    nav () {
      // const { locales } = this.$site
      // if (locales && Object.keys(locales).length > 1) {
      //   const currentLink = this.$page.path
      //   const routes = this.$router.options.routes
      //   const themeLocales = this.$site.themeConfig.locales || {}
      //   const languageDropdown = {
      //     text: this.$themeLocaleConfig.selectText || 'Languages',
      //     items: Object.keys(locales).map(path => {
      //       const locale = locales[path]
      //       const text = themeLocales[path] && themeLocales[path].label || locale.lang
      //       let link
      //       // Stay on the current page
      //       if (locale.lang === this.$lang) {
      //         link = currentLink
      //       } else {
      //         // Try to stay on the same page
      //         link = currentLink.replace(this.$localeConfig.path, path)
      //         // fallback to homepage
      //         if (!routes.some(route => route.path === link)) {
      //           link = path
      //         }
      //       }
      //       return { text, link }
      //     })
      //   }
      //   return [...this.userNav, languageDropdown]
      // }
      return this.userNav
    },

    repoLink () {
      const { repo } = this.$site.themeConfig
      if (repo) {
        return /^https?:/.test(repo)
          ? repo
          : `https://github.com/${repo}`
      }
    },

    repoLabel () {
      if (!this.repoLink) return
      if (this.$site.themeConfig.repoLabel) {
        return this.$site.themeConfig.repoLabel
      }

      const repoHost = this.repoLink.match(/^https?:\/\/[^/]+/)[0]
      const platforms = ['GitHub', 'GitLab', 'Bitbucket']
      for (let i = 0; i < platforms.length; i++) {
        const platform = platforms[i]
        if (new RegExp(platform, 'i').test(repoHost)) {
          return platform
        }
      }

      return 'Source'
    }
  },
  mounted() {
    this.userLinks()
  },
  methods: {
    userLinks () {
      this.links =  (this.nav || []).map(link => {
        return Object.assign(resolveNavLinkItem(link), {
          items: (link.items || []).map(resolveNavLinkItem)
        })
      })
    },
  }
}
</script>

<style lang="stylus">
getVar(var)
    unquote("var(--vs-"+var+")")
.nav-links
  display flex
  align-items center
  justify-content center
  a
    line-height 1.4rem
    color inherit
    &:hover, &.router-link-active
      color getVar(theme-color)
  .nav-item
    position relative
    display inline-block
    transition all .25s ease
    a
      opacity .5
      transition all .25s ease
      font-weight bold
      display block
      padding 18px
      &:after
        content: ''
        position absolute
        left 50%
        transform translate(-50%)
        bottom -3px
        width 0px
        height 3px
        background getVar(theme-color)
        border-radius 2px
        transition all .25s ease
      &:hover, &.router-link-active
        opacity 1 !important
      &.router-link-active
        &:after
          width 18px
    &:first-child
      margin-left 0
  .repo-link
    margin-left 1.5rem

@media (max-width: $MQMobile)
  .nav-links
    .nav-item, .repo-link
      margin-left 0

@media (min-width: $MQMobile)
  .nav-links a
    &:hover, &.router-link-active
      color getVar(theme-color)
</style>
